---
title: LlamaIndex Chat UI
description: A React component library for building modern chat interfaces with LLM applications
---

LlamaIndex Chat UI is a comprehensive React component library designed for building sophisticated chat interfaces in LLM applications. It provides pre-built, customizable components that integrate seamlessly with any backend by using the Vercel's [Streaming Protocol](https://ai-sdk.dev/docs/ai-sdk-ui/stream-protocol).

## Key Features

- **Complete Chat Interface** - Full-featured chat components with message history, input, and OpenAI-style canvas
- **Rich Parts** - Support for images, files, sources, events, and custom parts
- **Interactive Artifacts** - Code and document artifacts with editing and version management
- **File Upload Support** - Built-in handling for multiple file types (PDF, images, documents)
- **Beautiful** - Built on shadcn/ui for beautiful UI
- **Composable Architecture** - Highly customizable components that can be composed together
- **TypeScript First** - Full type safety and excellent developer experience
- **Vercel Streaming Protocol** - Designed to work seamlessly with `useChat` hook in the frontend and any backend that implements the protocol

## Core Components

- **ChatSection** - Main container that provides context and layout
- **ChatMessages** - Scrollable message history with loading states
- **ChatMessage** - Individual message display with role-based styling
- **ChatInput** - Input interface with file upload and keyboard shortcuts
- **ChatCanvas** - Side panel for displaying interactive code or document artifacts

## Widget System

The library includes a comprehensive widget system for handling various content types:

- **Content Widgets** - Markdown, code blocks, image display
- **Widgets for Part Rendering** - Sources, events, suggested questions
- **Interactive Widgets** - File upload, document editing, code editing

## Getting Started

The fastest way to add a chatbot to your project is using the Shadcn CLI command:

```shell
npx shadcn@latest add https://ui.llamaindex.ai/r/chat.json
```

For more information on configuration, please see detailed guide in [Getting Started](/docs/chat-ui/getting-started).

## Quick Example

```tsx
import { ChatSection } from '@llamaindex/chat-ui'
import { useChat } from '@ai-sdk/react'

export default function MyChat() {
  const handler = useChat({
    api: '/api/chat',
  })

  return <ChatSection handler={handler} />
}
```

This creates a complete chat interface with:

- Message history display
- User input with file upload
- Loading states and error handling
- Support for rich content using renderers for message parts

## Architecture

The library follows a composable architecture where you can:

1. **Use the complete solution** - `ChatSection` provides everything out of the box
2. **Compose custom layouts** - Mix and match components for custom designs
3. **Extend with widgets** - Add specialized content handling
4. **Create custom parts** - Build domain-specific content types

## Integration

Chat UI is designed to work with any chat backend that implements Vercel's [Streaming Protocol](https://ai-sdk.dev/docs/ai-sdk-ui/stream-protocol), to simplify getting started we provide examples for:

- **NextJS** - [NextJS Example](https://github.com/run-llama/chat-ui/tree/main/examples/nextjs)
- **FastAPI** - [FastAPI Example](https://github.com/run-llama/chat-ui/tree/main/examples/fastapi)
